<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <div class="id_layout">
        <div class="id_top">
            <a href="javascript:;" class="ico">
                <i class="iconfont icon-fanhui"></i>
                <p>返回</p>
            </a>
            <p class="title">账号与安全</p>
        </div>
        <form action="" class="id_main">
            <ul>
                <li>
                    手机号码: <input type="text" placeholder="您的注册手机号">
                    <a href="javascript:;"><span class="security">获取验证码</span></a>
                </li>
                <li>验证码: <input type="text" placeholder="您手机收到的验证码"></li>
                <li>新密码: <input type="password" placeholder="6-20位字母或数字"></li>
                <li>重复密码: <input type="password" placeholder="6-20位字母或数字"></li>
            </ul>
        </form>
        <div class="determine">
            <a href="javascript">确定</a>
        </div>
    </div>
    <script>
        $(function () {
            $('.security').on('click',function () {
                var time = 5;
                timerId = setInterval(function () {
                    if(time == 0) {
                        clearInterval(timerId);
                        $('.security').text('获取验证码');
                        return;
                    }
                    time--;
                    $('.security').text(time+'秒后点击获取验证码');
                }, 1000);
            })
        });
    </script>
</body>
</html>